
<template>
  <!-- #ifdef APP-NVUE -->
  <table></table>
  <!-- #endif -->
  <!-- #ifndef APP-NVUE -->

  <view class="tableBox" :style="[{ width: props.width + 'rpx' },props.height?{ height: props.height + 'rpx'}:'']">
    <tm-row v-if="props.showHeader" :transprent="true" :width="totalTableWidth" :column="_data.header.length">
      <tm-col 
      _class="flex flex-row flex-row-center-center"
      :text="item.opts?.light??false"
      :height="props.headerHeight" :color="item.opts?.color??'primary'" :transprent="false" 
      v-for="(item, index) in _data.header" :key="index"
      @click="headerClick(item,index)"
      >
        <view :style="{width:((item.opts?.sort??false)?(totalTableWidth/_data.header.length-60):(totalTableWidth/_data.header.length-60))+'rpx'}">
          <tm-text 
          _class="text-overflow-2 text-align-center"
          :line-height="0"
          :font-size="item.opts?.fontSize??0" :color="item.opts?.fontColor??''" :label="item.name"></tm-text>
        </view>
        <tm-icon v-if="item.opts?.sort??false" name="tmicon-sort" :font-size="26"></tm-icon>
      </tm-col>
    </tm-row>

    <block v-for="(item, index)  in _maxrows" :key="item" >
      <view :style="{width:totalTableWidth+'rpx'}">
        <tm-divider color='grey-5' v-if="props.showBottomBorder&&!_stripe" :margin="[0,0]"></tm-divider>
      </view>
      <tm-row  
      :color="_stripe?(index%2?'grey-5':'white'):'white'" 
      :width="totalTableWidth" :column="_data.header.length"
      :transprent="false"
      >
        <tm-col 
        :text="getOptsCellStyle(index2, index)?.light??false" 
        :height="props.cellHeight" v-for="(item2, index2) in _data.header.length" :key="item2" 
        :color="getOptsCellStyle(index2, index)?.color??''"
        :transprent="_stripe"
        @click="cellClick(index2,index)"
        _class="flex flex-row flex-row-center-center">
          <view class="flex-1" v-if="((_rows[index2] ?? [])[index].opts?.type??'text')=='button'">
            <tm-button
            
            :font-size="getOptsCellStyle(index2, index)?.fontSize??26"
            :color="getOptsCellStyle(index2, index)?.fontColor??'primary'"
            :label="(_rows[index2] ?? [])[index].value ?? '-'" :margin="[10,10]" :height="props.cellHeight-20" size="mini" block ></tm-button>
          </view>
          <tm-text
          v-else 
          :font-size="getOptsCellStyle(index2, index).fontSize"
          :line-height="0"
          :color="getOptsCellStyle(index2, index).fontColor"
          :label="(_rows[index2] ?? [])[index].value ?? '-'"></tm-text>
        </tm-col>
      </tm-row>
      
    </block>
  </view>

  <!-- #endif -->
</template>

<script setup lang="ts">
// #ifdef APP-NVUE
import table from "./table.vue";
// #endif
// #ifndef APP-NVUE
import type { headresItem, cellItem, dataTypeArray } from "./interface";
import { tableDataType, tabaleCellStyleType, defaultCellStyle ,tabaleCellData,headerType} from "./newInterface";
import { computed, nextTick, onMounted, PropType, Ref, ref, toRaw, watchEffect, watch, } from "vue";
import tmSheet from "../tm-sheet/tm-sheet.vue";
import tmText from "../tm-text/tm-text.vue";
import tmIcon from "../tm-icon/tm-icon.vue";
import tmButton from "../tm-button/tm-button.vue";
import tmRow from "../tm-row/tm-row.vue";
import tmCol from "../tm-col/tm-col.vue";
import tmDivider from "../tm-divider/tm-divider.vue";
import { cutomProps } from "./cutomProps";
const emits = defineEmits(["rowClick"]);
const props = defineProps(cutomProps);
const _data: Ref<tableDataType> = ref(props.tableData)
const sortType = ref('none')
let tid:any = NaN;
const _stripe = computed(()=>props.stripe)
const totalTableWidth = computed(() => {
  let d = props.cellWidth *  _data.value.header.length;
  
  if (d <= props.width) d = props.width;
  return d;
})
const _rows: Ref<Array<Array<tabaleCellData>>> = ref([])
let _rows_back: Array<Array<tabaleCellData>> = []
const _maxrows = ref(0)

onMounted(()=>{
  _rows.value = chuliRows(_data.value.data)
  _rows_back = uni.$tm.u.deepClone(_rows.value)
})
watch(
  [() => props.tableData],
  () => {
    clearTimeout(tid)
    tid = setTimeout(() => {
      let cdatas:any = uni.$tm.u.deepClone(props.tableData)
      _data.value = {...cdatas}
      _rows.value = chuliRows(_data.value.data)
      _rows_back = uni.$tm.u.deepClone(_rows.value)
     
    }, 150);
    
  },
  { deep: true }
);


function chuliRows(bigdata: Array<{ [key: string]: any }>) {
  let d: Array<Array<tabaleCellData>> = []
  let dlen: number[] = []
  let dstyle: Array<Array<{ [key: string]: tabaleCellStyleType }>> = []
  if(!bigdata){
    bigdata = []
  }
  _data.value.data = bigdata.map(el=>{
    let ptps: { [key: string]: tabaleCellStyleType } = el['opts'] ?? {}
      _data.value.header.forEach(ielem => {
        if (ptps[ielem.field]) {
          ptps[ielem.field] = { ...(ptps[ielem.field] ?? {}) }
        } else {
          ptps[ielem.field] = {  }
        }
      })
    el['opts'] = ptps;
    return el;
  })
 
  _data.value.header.forEach(el => {
    
    let pd: Array<tabaleCellData> = []
    pd = _data.value.data.map((ele: { [key: string]: any }) =>{
      let isasync = el?.opts?.asyncStyleCell??false
      
      return {
        value: ele[el.field] ?? '-',
        opts:
        {
          ...defaultCellStyle,
          ...{
            color:isasync===true?el.opts?.color??'white':'white',
            fontColor:isasync===true?el.opts?.fontColor??'black':'',
            light:isasync===true?el.opts?.light??false:false,
          },
          ...ele['opts'][el.field]}
      }
    })

    d.push(pd)
    dlen.push(pd.length)
    
  })
  _maxrows.value = Math.max(...dlen)
  return d;
}
function getOptsCellStyle(index1: number, index2: number) {
  let d = (_rows.value[index1] ?? [])[index2].opts ?? { ...defaultCellStyle }
  return d;
}
function cellClick(index1: number, index2: number){
  let dp = (_rows.value[index1] ?? [])[index2].value ?? '';
  /**row,col,value */
  emits('rowClick',index2,index1,dp)
}
function sort(data:Array<Array<tabaleCellData>>,index:number, type = "none",callback:Function) {
  uni.showLoading({
    title: "...",
    mask: true,
  });
  let d = data[index]
  // 排序
  if (type == "none") {
    data = uni.$tm.u.deepClone(_rows_back);
  }

  //降序
  if (type == "desc") {
    let dbiaoji = new Array()
    for(let i=0;i<d.length;i++){
      dbiaoji.push(i)
    }
    d = d.map((el,iof)=>{
      el['__ids']=iof
      return el;
    })
    d.sort((a, b) => Number(a.value) - Number(b.value));
    let pd:Array<Array<tabaleCellData>> = []
    data.forEach((element,index2) => {
      let p:Array<tabaleCellData> = []
      if(index2!==index){
        d.forEach((el,index3)=>{
          let nm = el['__ids'];
          p.push(element[nm])
        })
      }else{
        p = d
      }
      pd.push(p)
    });
    
    data = pd;
  }
  //升序。
  if (type == "asce") {
    let pd:Array<Array<tabaleCellData>>  = []
    data.forEach((element,index2) => {
      let p:Array<tabaleCellData>  = []
      p = [...element.reverse()]
      pd.push(p)
    });
    
    data = pd;
  }

  nextTick(() => {
    
    if(callback){
      callback(data)
    }
    uni.hideLoading();
  });
}
function headerClick(item:headerType,index:number){
  if(item.opts?.sort??false){
    let d = uni.$tm.u.deepClone(_rows.value)
    if(sortType.value=='none'){
      sortType.value = 'desc'
      
    }else if(sortType.value=='desc'){
      sortType.value = 'asce'
      
    }else if(sortType.value=='asce'){
      sortType.value = 'none'
    }
    sort(d,index,sortType.value,(ds:Array<Array<tabaleCellData>>)=>{
      _rows.value= [...ds];
    })
  }
}


// #endif
</script>

<style scoped>
.tableBox {
	/* #ifndef APP-NVUE */
  overflow: auto;
  /* #endif */
}
</style>
